import React, { useState, useEffect } from 'react';
import { Layout, Typography, Slider, Card, Space, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { RollbackOutlined, SoundOutlined, SettingOutlined, BgColorsOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import AnimatedButton from '../components/AnimatedButton';
import AnimatedText from '../components/AnimatedText';
import LegalParticlesBackground from '../components/LegalParticlesBackground';
import LegalDecorations from '../components/LegalDecorations';
import LegalCard from '../components/LegalCard';
import audioService from '../utils/audioService';

const { Content, Footer } = Layout;
const { Title, Paragraph } = Typography;

const Settings = () => {
  const navigate = useNavigate();
  const [volume, setVolume] = useState(audioService.getVolume());
  const [bgmPlaying, setBgmPlaying] = useState(audioService.getPlayingStatus());
  const [particleType, setParticleType] = useState('dustyParchment');
  
  // 初始化
  useEffect(() => {
    // 确保音频服务已初始化
    if (!audioService.initialized) {
      audioService.init();
    }
  }, []);
  
  // 音量变化处理
  const handleVolumeChange = (newVolume) => {
    setVolume(newVolume);
    audioService.setVolume(newVolume);
  };

  // 播放/暂停背景音乐
  const toggleBgm = () => {
    const isPlaying = audioService.toggle();
    setBgmPlaying(isPlaying);
  };
  
  // 粒子类型选项
  const particleOptions = [
    { value: 'dustyParchment', label: '羊皮纸风格', description: '轻盈的粒子飘动，如同古老法典的页面' },
    { value: 'lawBooks', label: '法律图标', description: '法律符号和图标的粒子效果' },
    { value: 'adventureSparks', label: '冒险火花', description: '闪烁的粒子连线，展现冒险精神' },
    { value: 'default', label: '简约', description: '简单的圆形粒子效果' }
  ];

  return (
    <Layout className="law-adventure-layout">
      {/* 粒子背景 */}
      <LegalParticlesBackground type={particleType} />
      
      {/* 装饰元素 */}
      <LegalDecorations type="goldenFrame" />
      
      <div style={{
        background: 'linear-gradient(135deg, var(--primary-color), #2c3e50)',
        padding: '16px 24px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        position: 'relative',
        zIndex: 1
      }}>
        <AnimatedText
          text="游戏设置"
          type="wordByWord"
          fontSize="36px"
          fontWeight="600"
          fontFamily="var(--title-font)"
          color="var(--light-color)"
          textAlign="center"
        >
          <SettingOutlined style={{ marginRight: '10px' }} />
        </AnimatedText>
      </div>
      
      <Content style={{ 
        padding: '40px 24px', 
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: 800, margin: '0 auto', position: 'relative' }}>
          <LegalCard 
            style="legal"
            title={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <SoundOutlined style={{ marginRight: '10px', fontSize: '24px' }} />
                <span>音频设置</span>
              </div>
            }
          >
            <div style={{ padding: '20px', marginBottom: '20px' }}>
              
              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <SoundOutlined style={{ fontSize: '24px', color: 'var(--secondary-color)' }} />
                <Slider 
                  min={0}
                  max={1}
                  step={0.01}
                  value={volume}
                  onChange={handleVolumeChange}
                  tooltip={{ formatter: value => `${Math.round(value * 100)}%` }}
                  style={{ flex: 1 }}
                />
                <div style={{ 
                  minWidth: '60px', 
                  textAlign: 'center',
                  fontFamily: 'var(--title-font)',
                  color: 'var(--secondary-color)',
                  fontSize: '18px',
                  fontWeight: 'bold'
                }}>
                  {Math.round(volume * 100)}%
                </div>
              </div>
              
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'center' }}>
                <Button 
                  type="primary"
                  icon={bgmPlaying ? <SoundOutlined /> : <SoundOutlined style={{ color: '#fff', opacity: 0.5 }} />}
                  onClick={toggleBgm}
                >
                  {bgmPlaying ? '暂停背景音乐' : '播放背景音乐'}
                </Button>
              </div>
            </div>
          </LegalCard>
          
          <LegalCard 
            style="parchment"
            title={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <BgColorsOutlined style={{ marginRight: '10px', fontSize: '24px' }} />
                <span>背景效果</span>
              </div>
            }
          >
            <AnimatedText
              text="选择您喜欢的背景粒子效果"
              type="fade"
              delay={0.3}
              style={{ display: 'block', marginBottom: '20px', textAlign: 'center' }}
            />
            
            <Space direction="vertical" style={{ width: '100%' }}>
              {particleOptions.map((option, index) => (
                <div 
                  key={option.value}
                  onClick={() => setParticleType(option.value)}
                  style={{
                    padding: '15px',
                    borderRadius: '8px',
                    border: `2px solid ${particleType === option.value ? 'var(--secondary-color)' : 'transparent'}`,
                    background: particleType === option.value ? 'rgba(166, 124, 0, 0.1)' : 'transparent',
                    cursor: 'pointer',
                    transition: 'all 0.3s',
                    marginBottom: '10px',
                    display: 'flex',
                    flexDirection: 'column'
                  }}
                >
                  <AnimatedText
                    text={option.label}
                    type="fade"
                    delay={0.3 + index * 0.1}
                    fontWeight="bold"
                    fontSize="18px"
                    style={{ marginBottom: '5px' }}
                  />
                  <AnimatedText
                    text={option.description}
                    type="fade"
                    delay={0.4 + index * 0.1}
                    fontSize="14px"
                    color="var(--dark-color)"
                  />
                </div>
              ))}
            </Space>
          </LegalCard>
          
          <LegalCard 
            style="scroll"
            title={
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <QuestionCircleOutlined style={{ marginRight: '10px', fontSize: '24px' }} />
                <span>帮助</span>
              </div>
            }
          >
            <AnimatedText
              text="如何玩转法链云迹？"
              type="highlight"
              fontWeight="bold"
              fontSize="18px"
              style={{ display: 'block', marginBottom: '10px', textAlign: 'center' }}
            />
            
            <div style={{ padding: '10px' }}>
              <ul style={{ textAlign: 'left', paddingLeft: '20px' }}>
                {[
                  '可以在玩法介绍页面查看详细游戏规则',
                  '每个答题都有详细解析，帮助您学习法律知识',
                  '不同的游戏风格对应不同的游戏难度',
                  '选择更多案例类型可以获得额外的律迹骰',
                  '律迹骰可以在关键时刻提供帮助'
                ].map((tip, index) => (
                  <li key={index}>
                    <AnimatedText
                      text={tip}
                      type="slideRight"
                      delay={0.3 + index * 0.1}
                    />
                  </li>
                ))}
              </ul>
            </div>
          </LegalCard>
          
          <div style={{ textAlign: 'center', margin: '30px 0' }}>
            <AnimatedButton
              style="legal"
              size="large"
              icon={<RollbackOutlined />}
              onClick={() => navigate('/')}
            >
              返回首页
            </AnimatedButton>
          </div>
        </div>
      </Content>
      
      <Footer className="law-adventure-footer">
        <div>
          法链云迹 - 寓教于乐的法律知识普及游戏
        </div>
      </Footer>
    </Layout>
  );
};

export default Settings;
